<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>诛仙1</title>
    </head>
    <body>
        <div id="app">
            <div>
                <ul>
                    <li v-for="(item,index) in list">索引是:{{index}} , 姓名是:{{item.name}} , 编号是:{{item.id}}</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li v-for="user in userList" :key="user.id">
                        <input type="checkbox" />
                        姓名：{{user.name}}
                    </li>
                </ul>
            </div>
            <p>{{message | capitalize | capitalizeB(3)}}</p>
            <div v-bind:id="rawId | capitalize"></div>
            
        </div>
        <script src="/lib/vue.js"></script>
        <script>
            Vue.filter('capitalize',(str)=>{
                return str.charAt(0).toUpperCase()+str.slice(1)+'----';
            })
        </script>
        <script>
            const vm = new Vue({
                el:'#app',
                data:{
                    list:[
                        {
                            id:'1',name:'zs'
                        },
                        {
                            id:'2',name:'ls'
                        }
                    ],
                    userList:[
                        {id:'1',name:'张三'},
                        {id:'2',name:'李四'}
                    ],
                    message:'hello vue.js',
                    info:'title info',
                    rawId:'aaa'
                },
                methods:{

                },
                filters:{
                    capitalizeB(str,length=2){
                        return str.slice(0,length)+'...';
                    }
                }
            });
        </script>
    </body>
</html>